import { quillEditor } from "vue-quill-editor"; //调用编辑器
import "quill/dist/quill.core.css";
import "quill/dist/quill.snow.css";
import "quill/dist/quill.bubble.css";
// 简单学科
import { simple } from '@/api/hmmm/subjects'
// 企业
import { list as companysList } from '@/api/hmmm/companys'
// 城市
import { provinces, citys } from '@/api/hmmm/citys.js'
// 目录
import { simple as directorysSimpleList } from '@/api/hmmm/directorys'
import { direction, difficulty, questionType } from '@/api/hmmm/constants'
// 题库
import { add, update, detail} from '@/api/hmmm/questions'
// 标签
import { simple as tagSimple, add as tagAdd} from '@/api/hmmm/tags'
export default {
  components: {
    quillEditor,
  },
  data() {
    return {
      checkList: "",
      content: "",
      editorOption: {
        modules: {
          toolbar: [
            ["bold", "italic", "underline", "strike"],
            [{ list: "ordered" }, { list: "bullet" }], // toggled buttons
            ["blockquote"],
            ["code-block", "image", "link"],
          ],
        },
        placeholder: '', //提示
      },
      formData: {
        id: '',
        subjectID: '', // 学科
        catalogID: '', // 目录
        enterpriseID: '', // 企业
        province: '', // 城市
        city: '', //地区
        direction: '', // 方向
        questionType: '1', // 题型
        difficulty:'1', // 难度
        question: '', // 题干
        options: [
          {
            code: 'A',
            title: '',
            img: '',
            isRight: false
          },
          {
            code: 'B',
            title: '',
            img: '',
            isRight: false
          },
          {
            code: 'C',
            title: '',
            img: '',
            isRight: false
          },
          {
            code: 'D',
            title: '',
            img: '',
            isRight: false
          }
        ], //选项
        videoURL: '', // 解析视频
        answer: '', // 答案解析
        remarks: '', // 题目备注
        tags: "", // 试题标签
      },
      rules: {
        subjectID: [
          {required: true, message: '请选择学科', trigger: 'change'}
        ],
        catalogID: [
          {required: true, message: '请选择目录', trigger: 'change'}
        ],
        enterpriseID: [
          {required: true, message: '请选择企业', trigger: 'blur'}
        ],
        province: [
          {required: true, message: '请选择城市', trigger: 'change'}
        ],
        city: [
          {required: true, message: '请选择地区', trigger: 'change'}
        ],
        direction: [
          {required: true, message: '请选择方向', trigger: 'blur'}
        ],
        questionType: [
          {required: true, message: '请选择题型', trigger: 'change'}
        ],
        difficulty: [
          {required: true, message: '请选择难度', trigger: 'change'}
        ],
        question: [
          {required: true, message: '请输入题干', trigger: 'blur'}
        ],
        answer: [
          {required: true, message: '请输入答案解析', trigger: 'blur'}
        ],
      },
      citySelect: {
        province: [],
        cityDate: []
      },
      SubjectSimpleList: [],
      companysList: [],
      directorysSimpleList: [],
      directionList: [],
      difficulty: [],
      questionType: [],
      code: [],
      radio: '',
      tagList: [],
      imgUrl: ''
    };
  },
  async mounted() {
    if (this.$route.query.id) {
     window.scroll(0, 0)
      const res = await detail({ id: this.$route.query.id })
      this.formData = res.data
      this.formData.id = Number(this.$route.query.id)
      this.formData.tags = this.formData.tags.split(',')
      this.formData.videoURL = " "
      this.formData.remarks = " "
      const dir = await directorysSimpleList({ subjectID: this.formData.subjectID })
      this.directorysSimpleList = dir.data
      if (this.formData.questionType == '1') {
        this.formData.options.forEach(item => {
          if (item.isRight == 1) {
            this.radio = item.code
          }
        })
      } else if (this.formData.questionType == '2') {
        this.formData.options.forEach(item => {
          if (item.isRight == 1) {
            this.code.push(item.code)
          }
        })
      }
    }
        // 学科列表
    const sub = await simple()
    this.SubjectSimpleList = sub.data
    // 企业列表
    const cpy = await companysList()
    this.companysList = cpy.data.items
    // 获取城市
    this.getCityData()
    // 方向列表
    this.directionList = direction

  },
  methods: {
    // 上传图片
    uploadSucess(res, file, fileList, i) {
      this.imgUrl = URL.createObjectURL(file.raw)
        const index = this.formData.options.findIndex(item => {return item.code == i.code})
        this.formData.options[index].img = this.imgUrl
     },
    // 获取省
    getCityData: function () {
      this.citySelect.province = provinces()
    },
    // 选省获取到市
    handleProvince: function (e) {
      this.citySelect.cityDate = citys(e)
      // this.requestParameters.city = this.citySelect.cityDate[0]
    },
    // 根据学科获取
    getDirectorys: async function (e) {
      const dir = await directorysSimpleList({ subjectID: e })
      this.directorysSimpleList = dir.data
      const tag = await tagSimple({ subjectID: e })
      this.tagList = tag.data
      console.log(this.formData.tags.length);
    },
    // 选项
    radioChange(e) {
      if (e == 1) {
        this.radioValue()
      } else if (e == 2) {
        this.checkboxValue()
      }
    },
    // 单选
    radioValue() {
      this.formData.options.forEach(item => {
        if (item.code.includes(this.radio)) {
          item.isRight = true
        }
      })
    },
    // 多选
    checkboxValue() {
      this.formData.options.forEach(item => {
        if (this.code.includes(item.code)) {
          item.isRight = true
        }
      })
    },
    // 增加选项
    checkboxAddBtn() {
      const str = this.formData.options[this.formData.options.length - 1].code
      const newStr = String.fromCharCode(str.charCodeAt(0) + 1)
      this.formData.options.push({
        code: newStr,
        title: '',
        img: '',
        isRight: false
      })
    },
    // 提交表单
     onSubmit() {
      this.$refs.form.validate(async val => {
        if (!val) return this.$message.error('表单验证未通过')
        if (this.formData.questionType === '3') {
          this.formData.options = []
        }
        if (this.formData.tags.length == 0) {
          console.log(111);
          this.formData.tags = " "
        } else { this.formData.tags = this.formData.tags.join(',')}
        console.log(this.formData);
        if (!this.$route.query.id) {
          await add(this.formData)
          this.$message.success('提交成功')
        } else {
          await update(this.formData)
          this.$message.success('修改成功')
        }
        this.$router.go(-1)
      })

    },
  },
    watch: {
        $route: {
          immediate: true,
          handler () {
            if (!this.$route.params.id) {

                 this.formData =  {
        id: '',
        subjectID: '', // 学科
        catalogID: '', // 目录
        enterpriseID: '', // 企业
        province: '', // 城市
        city: '', //地区
        direction: '', // 方向
        questionType: '1', // 题型
        difficulty:'1', // 难度
        question: '', // 题干
        options: [
          {
            code: 'A',
            title: '',
            img: '',
            isRight: false
          },
          {
            code: 'B',
            title: '',
            img: '',
            isRight: false
          },
          {
            code: 'C',
            title: '',
            img: '',
            isRight: false
          },
          {
            code: 'D',
            title: '',
            img: '',
            isRight: false
          }
        ], //选项
        videoURL: '', // 解析视频
        answer: '', // 答案解析
        remarks: '', // 题目备注
        tags: "", // 试题标签

                 }
              this.radio = ""
              this.code = []
              this.$nextTick(() => {
                this.$refs['form'].clearValidate();
              });
            }
         
          }
        }
      },
};